<!--
    * Time    : 2021-03-29 14:49:03
    * Author  : zhangTj
    * Desc    : 自提点信息列表
-->

<template>
    <div class="w750">
        <van-notice-bar v-if="pointInfo.auditStatus == 'BAN'" scrollable text="您的自提点已被禁用，暂不能接单，可联系商家解决。" />
        <div class="px-1 pt-1 bg-fff">
            <div class="bg-main text-fff px-1 py-15p rounded-8">
                <div @click="$toPage('pointIndex')" class="font-16 flex-between">
                    <span>{{ pointInfo.pointName }}</span>
                    <i class="iconfont iconsetting text-fff"></i>
                </div>
                <p class="line-clamp1 font-14 mt-1">{{ pointInfo.sinceMentionDetailAddr }}</p>
            </div>
        </div>

        <div>
            <div class="position-sticky top-0 bg-fff px-1 pb-1" style="z-index: 10">
                <van-tabs
                    v-model="active"
                    class="bg-fff"
                    line-height="4px"
                    :color="themes.color"
                    :title-active-color="themes.color"
                    @change="changeTab"
                >
                    <van-tab title="全部" name="" />
                    <van-tab title="待备货" name="0" />
                    <van-tab title="待核销" name="1" />
                    <van-tab title="已核销" name="2" />
                </van-tabs>
                <div class="bg-f5 mt-1 rounded-15 d-flex a-center" style="padding: 7px 10px">
                    <i class="iconfont iconsearch" style="font-size: 14px"></i>
                    <input
                        type="text"
                        v-model="params.keyWord"
                        @keyup.enter="enterSearch"
                        class="bg-f5 px-1 font-12 w-100"
                        placeholder="可搜索手机号、订单号、收件人"
                    />
                </div>
            </div>
            <div class="font-14 bg-fff">
                <van-list
                    v-if="!partLoading && !paging.emptylist"
                    v-model="paging.loading"
                    :finished="paging.finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="loadMore"
                >
                    <van-checkbox-group ref="checkBox" v-model="selectResult" :checked-color="themes.color">
                        <div v-for="item in list" :key="item.id" class="py-2 px-1 border-top-10bg">
                            <div class="flex-between">
                                <div class="d-flex a-center">
                                    <van-checkbox
                                        v-if="selectStatus && item.status == 2 && item.refundState == 0 && pointInfo.disSinceMentionSupStockUp"
                                        :name="item.subNumber"
                                    />
                                    <span class="ml-1">订单号：{{ item.subNumber }}</span>
                                </div>
                                <span>{{ item.statusFlag }}</span>
                            </div>
                            <div @click="$toPage('pointDetail', { id: item.subNumber, source: 20 })">
                                <div v-if="item.items.length == 1" class="d-flex mt-1">
                                    <div style="width: 80px; height: 80px">
                                        <legend-image :pic="item.items[0].pic" alt="" :isJD="item.items[0].prodSource == 'JD'" class="w-100 h-100" />
                                    </div>
                                    <div class="flex-1 ml-1">
                                        <div class="line-clamp2">{{ item.items[0].prodName }}</div>
                                        <div class="text-999 font-12 mt">
                                            <span class="mr-1">{{ item.items[0].attribute }}</span>
                                        </div>
                                    </div>
                                    <div class="font-12 text-999">
                                        <span>共{{ item.items[0].basketCount }}件</span>
                                    </div>
                                </div>
                                <!-- 超过两个 -->
                                <div v-else class="flex-1 mt-1 d-flex a-center">
                                    <div class="flex-1 d-flex overflow-x-scroll overflow-y-h">
                                        <div class="position-relative mr-1" v-for="(good, goodIndex) in item.items" :key="goodIndex">
                                            <div style="width: 80px; height: 80px">
                                                <legend-image :pic="good.pic" alt="" :isJD="good.prodSource == 'JD'" class="w-100 h-100" />
                                            </div>
                                            <div
                                                class="position-absolute w-100 text-fff text-center bottom-0 left-0"
                                                style="background: rgba(0, 0, 0, 0.5)"
                                            >
                                                <span>{{ good.basketCount }}件</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="font-12 ml-1 text-999">
                                        <span>共{{ item.productNums }}件</span>
                                    </div>
                                </div>
                                <div class="font-12 mt-1 d-flex a-center flex-end text-right">
                                    <span>实收款：</span>
                                    <span class="font-14">￥ {{ money(item.actualTotal)[0] }}.{{ money(item.actualTotal)[1] }}</span>
                                    <span class="text-999 ml">(含运费￥{{ money(item.freightAmount)[0] }}.{{ money(item.freightAmount)[1] }})</span>
                                </div>
                                <div
                                    v-if="item.stockUpFlag && pointInfo.disSinceMentionSupStockUp"
                                    @click.stop="storeUp(item.subNumber)"
                                    class="font-12 mt-1 d-flex a-center flex-end text-right"
                                >
                                    <span class="border-main rounded-20 text-main" style="padding: 6px 16px">备货完成</span>
                                </div>
                            </div>
                        </div>
                    </van-checkbox-group>
                </van-list>

                <part-loading v-model="partLoading" backgroundColor="#fff" height="400px" size="24px" :color="themes.color" />

                <Noempty
                    v-if="paging.emptylist || paging.error"
                    :pic="require('@/assets/images/personal-no-good.png')"
                    title="您的自提点暂无相关订单"
                ></Noempty>
            </div>
        </div>

        <div class="position-fixed" style="bottom: 80px; right: 10px">
            <div
                @click="$toPage('pointWriteOff')"
                class="d-flex flex-column a-center rounded-circle text-fff j-center"
                style="width: 50px; height: 50px; background: rgba(0, 0, 0, 0.4)"
            >
                <i class="iconfont iconscan" style="font-size: 18px"></i>
                <svg height="10" style="fill: currentColor; color: #fff; margin-top: 2px; width: 100%">
                    <text dominant-baseline="top" textLength="40" font-size="9" x="5" y="8">订单核销</text>
                </svg>
            </div>
        </div>

        <transition-group name="van-fade" mode="out-in">
            <div style="height: 50px" :key="998" v-show="!selectStatus && stockUp">
                <div class="position-fixed w-100 font-14 text-center bg-fff py-1" style="bottom: 0px; left: 0">
                    <div @click="selectGood(true)" class="mx-2 bg-main text-fff rounded-20" style="height: 40px; line-height: 40px">
                        <span>批量备货</span>
                    </div>
                </div>
            </div>
            <div style="height: 50px" :key="999" v-show="selectStatus">
                <div class="position-fixed w-100 font-14 text-center bg-fff py-1" style="bottom: 0px; left: 0">
                    <div class="d-flex a-center px-1">
                        <van-checkbox v-model="checkedAll" @change="toggleAll" :checked-color="themes.color">全选</van-checkbox>
                        <div class="font-14 flex-1 d-flex flex-end">
                            <span @click="selectGood(false)" class="border rounded-20 mr-1" style="width: 100px; height: 40px; line-height: 40px">
                                取消
                            </span>
                            <span @click="submit" class="bg-main text-fff rounded-20" style="width: 100px; height: 40px; line-height: 40px">
                                确认备货
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </transition-group>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import PartLoading from '@/components/PartLoading/PartLoading'
import Noempty from '@/components/Noempty/Noempty'
import { disSMPoint, disSMPointOrderList, disSMPointStockUp } from '@/api/distributorPoints'
import PageUtil from 'utils/PageUtil'
import legendImage from '@/components/legendImage/legendImage'
import cash from 'utils/tool'

const pageUtil = new PageUtil(disSMPointOrderList)

export default {
    name: 'pointList',
    components: { Noempty, PartLoading, legendImage },
    data() {
        return {
            active: 0,
            selectStatus: false, // 是否展示全选
            selectResult: [], // 选中的商品数组
            checkedAll: false, // 全选状态
            partLoading: true,
            money: cash,

            pointInfo: '', // 自提点信息
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            list: [],
            params: {
                pointId: '',
                status: '', // (0：待备货,1：待核销,2：已核销,3：已完成,4:已取消,5:已过期)
                keyWord: ''
            }
        }
    },
    computed: {
        ...mapState(['themes']),
        // 备货状态
        stockUp() {
            return this.list && this.list.filter((item) => item.status == 2 && item.refundState == 0 && this.pointInfo.disSinceMentionSupStockUp).length > 0
        }
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getInfo()
    },
    methods: {
        // 获取自提点信息
        getInfo() {
            disSMPoint().then((res) => {
                if (!res.success) return void this.$toast(res.message)

                this.pointInfo = res.result
                this.$set(this.params, 'pointId', res.result.id)

                pageUtil.loadListByPage(this, this.params, {
                    complete: () => {
                        this.partLoading = false
                    }
                })
            })
        },

        // 上拉加载更多
        loadMore() {
            pageUtil.loadListByPageMore(this.params)
        },

        // 搜索
        enterSearch() {
            this.$set(this.params, 'curPageNO', 1)
            pageUtil.loadListByPage(this, this.params)
        },

        // 切换tab
        changeTab(name) {
            this.$set(this.params, 'status', name)
            this.$set(this.params, 'curPageNO', 1)
            pageUtil.loadListByPage(this, this.params)
        },

        // 配货
        selectGood(status) {
            this.selectStatus = status
        },

        // 全选
        toggleAll(status) {
            this.$refs.checkBox.toggleAll(status)
        },

        // 提交
        submit() {
            if (!this.selectResult.length) return void this.$toast('请选择要备货的订单')

            disSMPointStockUp({
                subNumberList: [this.selectResult].join(',')
            })
                .then((res) => {
                    if (!res.success) return void this.$toast(res.msg)

                    this.$toast('操作成功')
                    this.selectStatus = false
                    pageUtil.loadListByPage(this, this.params)
                })
                .catch((err) => {
                })
        },

        // 备货(单个)
        storeUp(orderNum) {
            disSMPointStockUp({
                subNumberList: [orderNum].join(',')
            })
                .then((res) => {
                    if (!res.success) return void this.$toast(res.msg)

                    this.$toast('操作成功')
                    this.selectStatus = false
                    pageUtil.loadListByPage(this, this.params)
                })
                .catch((err) => {
                })
        }
    }
}
</script>
